<template>
  <el-button @click="open">打开</el-button>
  <div class="context-menu" @contextmenu.stop.prevent="open1"></div>
</template>
<script setup lang="ts">
import { UContextMenu, UToast } from 'undraw-ui';
import 'undraw-ui/es/components/context-menu/context-menu.css'
import 'undraw-ui/es/components/icon/icon.css'
import 'undraw-ui/es/components/toast/toast.css'
import { ref } from 'vue'

function open() {
  UToast({ message: 'this is a message.', type: 'warn' })
}

function open1(e: MouseEvent) {
  UContextMenu(e, {
    data: [
      {
        label: '按钮1',
        callback(done) {
          console.log('按钮1')
          done()
        }
      },
      {
        label: '按钮2',
        callback(done) {
          console.log('按钮2')
          done()
        }
      }
    ]
  })
}
</script>

<style lang="scss" scoped>
.context-menu {
  height: 200px;
  border: 1px #1f1f1f solid;
}
</style>
